<template>
  <div>
    <!-- 搜索区域 -->
    <el-row type="flex" justify="space-around">
      <el-col :span="6">
        <el-input
          class="w-50 m-2"
          placeholder="请输入搜索关键词"
          prefix-icon="el-icon-search"
          size="medium"
        >
          <el-button
            type="info"
            size="medium"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="11"> </el-col>
      <el-col :span="7">
        <el-button type="primary" size="small" @click="buffer.formBuffer = true"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!-- 数据列表区域 -->
    <list-comp
      :menuList="menuList"
      :cellStyle="cellStyle"
      @edit="editMenu"
      @remove="removeMenu"
    ></list-comp>
    <!-- 添加区域 | 编辑区域 -->
    <form-comp
      ref="formMenu"
      :menuList="menuList"
      :buffer="buffer"
      @channel="getMenuList"
    ></form-comp>
  </div>
</template>

<script>
// 1.引入列表和添加/编辑表单组件
import listComp from "./components/list";
import formComp from "./components/form";
export default {
  components: {
    listComp,
    formComp,
  },
  data() {
    return {
      menuList: [], //所有的菜单列表数据
      // 控制表单弹起
      buffer: {
        formBuffer: false,
      },
      cellStyle: { background: "#FF6040", color: "white", height: "50px" },
    };
  },
  mounted() {
    // 获取所有的菜单数据
    this.getMenuList();
  },
  methods: {
    // 获取所有的菜单数据
    getMenuList() {
      this.$api
        .reqGetMenu({ istree: true })
        .then((res) => {
          console.log("数据是：", res);
          this.menuList = res;
        })
        .catch((err) => console.log(err));
    },
    // 编辑菜单数据
    editMenu(info) {
      // 1.解构获取待修改数据的下标和内容
      let { index, row } = info;
      // 2.将待修改的数据赋值给表单 delete()删除对象中的某些属性  object.defineProtype('存储描述符')
      delete row.children;
      this.$refs.formMenu.form = JSON.parse(JSON.stringify(row));
      // 3.弹起表单
      this.buffer.formBuffer = true;
    },
    // 删除菜单数据
    removeMenu(info) {
      //    this.$api.reqDeleteMenu
      let { row, index } = info;

      this.$confirm("此操作将永久删除该数据, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async() => {
            try {
                let res=await this.$api.reqDeleteMenu({id:row.id})
                console.log(res);
                this.menuList=res
            } catch (error) {
                console.log(error);
            }
            this.$message({
            type: "warning",
            message: "删除成功",
          });
           
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style  lang="less" scoped>
.el-row {
  margin: 20px 0;
}
</style>
